/*
    组件之间的通信 
    
    1. 父子 组件 
    <A>
        <B></B>
    </A>
    2. 兄弟组件 
    <A></A><B></B>

    props 传递数据
    state 修改数据 

    父组件如何修改子组件

    父组件把组件的state 当着子组件的props 传递给子组件
    父组件修改 state 会二次render 子组件接收到变化的 props  从而实现子组件修改  

    ref   this.refs  对象获取
    1. ref 作用于DOM 元素  指向这个真实的DOM元素    ref="text"  this.refs.text
    2. ref 作用于组件  指向这个组件对象             ref={e=>this.text=e }  this.text 
    ref={ele=>this.oh=ele}

    架构
    flux  redux mobx  event 


    受控的Input 组件
    受控的组件  input 绑定动态的 value  value 受state 状态控制的  只有state改变 input才能改变
    非受控的组件  value 没有绑定状态 


*/ 

import React, { Component } from 'react'
import { PropTypes } from 'prop-types';

export default class State2 extends Component {
    state = {
        count:1000,
        word:"ARe you OK",
        flag:true
    }
    changeCount=()=>{
        this.setState({
            count:++this.state.count 
        })
    }
    changeWord=(e)=>{
        this.setState({
            word:e.target.value 
        })
    }
    change=()=>{
        console.log(this)
        this.refs.one.style.color = "red"
        this.setState({
            word:this.inp.value   // ref=>真实DOM 
        })
    }
    changeflag=()=>{
        this.setState({
            flag:!this.state.flag
        })
    }

    changechildByRefs=()=>{
        // this.child.setState({
        //     count:++this.child.state.count
        // })
        this.child.change()
    }
  render() {
    return (
      <div ref={el=>this.all=el} style={{padding:20}}>
         
                <h2 ref="one">React 父子组件通信 (父改子)</h2> 
          <h2 onClick={this.changeCount}>count ==== {this.state.count} </h2>
          <p>
                    <input type="text" value={this.state.word}  onChange={this.changeWord} />
                </p>

                <p>
                    <input type="text" ref={el=>this.inp=el}  onChange={this.change}  />
                </p>
                <button onClick={this.changeflag}>{this.state.flag?'点击隐藏':'点击显示'}</button>
                <button onClick={this.changechildByRefs}>通过ref 修改子组件</button>
          <hr/>
          <hr/>
         <ChildOne
          num={this.state.count}
          word={this.state.word} 
          flag={this.state.flag}

          ref={el=>this.child=el}
         />
       
      </div>
    )
  }
}

class ChildOne extends Component {
    state={
        count:2000
    }
    change=()=>{
           this.setState({
           count:++this.state.count+100
            })
            console.log("are you sleep");
    }
    render() {
      
        const {num,word,flag} = this.props
        const {count}=this.state
      return (
          
        <div>
            <h2>
            ChildOne - ChildOne - 子组件 - 1
            </h2>
            <h2>num--- {num }</h2>
            <h2>word --- {word}</h2>
            <h2>count --- {count}</h2>
            <p style={{width:200,height:200,backgroundColor:"pink",display:flag?'block':'none'}}>
                我是被父组件控制的
            </p>
        </div>
      )
    }
  }

  ChildOne.propTypes = {
    num:PropTypes.number.isRequired, 
    word:PropTypes.string.isRequired 
}